<template>
    <div id="app">
        <div id="header">
          <my-header></my-header>
        </div>
          <div id="content">
            <router-view></router-view>
            </div>
            <div id="footer">
              <my-footer></my-footer>
            </div>
  </div>
</template>

<script>
import myHeader from './components/my-header'
import myFooter from './components/my-footer'
export default {
  name: 'app',
  components:{myHeader,myFooter}
  
}
</script>


<style lang ="scss">
#app{
  height:100%;
  width:100%;
   #footer{
    width:100%;
    height:40px;
     position: fixed;
     bottom:0;
   
  }
  #header{
    height: 44px;
    width:100%;
    position: fixed;
    top:0;
  }
  #content{
     width:100%;
     height: 100%;
     padding-top:44px;
     padding-bottom:40px;
     overflow: hidden;
  }

}


</style>
